<template>
  <el-container class="register-container" >
    <el-aside width="60%" class="register-aside">
      <el-card class="register-content">
        <h1 class="register-title">创建账号</h1>
        <div class="register-comment">欢迎加入我们，请填写以下信息完成注册</div>
        <el-form :model="registerForm" label-width="80px" label-position="left"
                 :rules="rules" ref="registerForm">
          <el-form-item  label="账号" prop="no">
            <el-input  style="width: 300px" type="text" v-model="registerForm.no"
                       autocomplete="off" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item  label="密码" prop="password">
            <el-input  style="width: 300px" type="password" v-model="registerForm.password"
                       show-password autocomplete="off" @keyup.enter.native="register"
                       prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item  label="确认密码" prop="passwordCheck">
            <el-input  style="width: 300px" type="password" v-model="registerForm.passwordCheck"
                       show-password autocomplete="off" @keyup.enter.native="register"
                       prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item label="用户角色" prop="roleId" >
            <el-radio-group v-model="registerForm.roleId" size="small">
              <el-radio-button :label="1">管理员</el-radio-button>
              <el-radio-button :label="2">普通用户</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-button class="register-button" type="primary" @click="register" :disabled="confirm_disabled">注 册</el-button>
        <p class="login-button">已有账号？<a style="color: #409EFF;text-decoration: underline" @click="login">去登录</a></p>
      </el-card>


    </el-aside>
    <el-main>

    </el-main>
  </el-container>
</template>


<script>
export default {
  name: "register",
  data(){
    return{
      //confirm_disabled 被初始化为 false，这意味着注册按钮默认是可用的
      confirm_disabled:false,
      registerForm:{
        no:'',
        password:'',
        passwordCheck:'',
        roleId:''
      },

      rules:{
        no: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur'},
        ],
        password: [
          { required: true, message: '请输密码', trigger: 'blur' }
        ],
        passwordCheck: [
          { required: true, message: '请输确认密码', trigger: 'blur' },
          { validator: this.checkPasswordConsistency, trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    checkPasswordConsistency(rule, value, callback) {
      if (this.registerForm.password !== this.registerForm.passwordCheck) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    login(){
      this.$router.push({path:'/'})
    },
    register() {
      this.confirm_disabled=true;
      this.$refs.registerForm.validate((valid) => {
        if (valid) { //valid成功为true，失败为false
          //去后台验证用户名密码
          const formData={
            no: this.registerForm.no,
            password: this.registerForm.password,
            roleId: this.registerForm.roleId
          }
          this.$axios.post(this.$httpUrl+'/user/register',formData).then(res=>res.data).then(res=>{
            console.log(res)
            if(res.code===200){
              //存储
              sessionStorage.setItem("CurUser",JSON.stringify(res.data.user))
              console.log(res.data.menu)
              this.$store.commit("setMenu",res.data.menu)
              //跳转到主页
              this.$router.replace('/Index');
            }else{
              this.confirm_disabled=false;
              console.log(res)
              alert(res.msg);
              return false;
            }
          });
        } else {
          this.confirm_disabled=false;
          console.log('校验失败');
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
.register-container{
  background-image: url("../assets/background.png");
  background-size: cover; /* 确保图片覆盖整个容器 */
  background-position: center; /* 图片居中显示 */
  height: 100vh; /* 容器高度为视口高度 */

}
.register-aside {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 使 el-aside 填充整个视口高度 */
}
.register-title {
  font-size: 32px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: left;
}
.register-comment{
  margin-bottom: 20px;
  color: grey;
}
.register-content {
  height: 500px;
  margin: auto;
  width: 500px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.register-button{
  margin-top: 20px;
  margin-left: 40px;
}
.login-button{
  margin-top: 20px;
  margin-left: 40px;
}
.custom-input {
  border-radius: 4px; /* 圆角边框 */
  height: 48px; /* 增加输入框的高度 */
  font-size: 16px; /* 增加字体大小 */
  border: 1px solid #dcdfe6; /* 边框颜色 */
  background-color: #ffffff; /* 背景透明 */
  transition: border-color 0.3s; /* 边框颜色变化的过渡效果 */
}
</style>